<template>
    <div class="bookitem">
        <div class="leftimg">
            <img :src="mbookItem.image" alt="">
        </div>
        <div class="rightdesc">
            <div class="bookbrief">
                <p>{{mbookItem.name}}</p>
                <p>{{mbookItem.publishname}} - {{time}}</p>
            </div>
            <div class="bookdesc">
                {{mbookItem.detail}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        newbookMes: { type: Object, default: {id:"",image:"",levelid:"",name:"",publishname:"",status:"",userid:"",detail:"",publishtime:"" } }

        // newbookMes: { type: Object, default: {url:'', bookname: '《江海联运电子航道图生产技术及应用》', press: '西安地图出版社', time: '2021.6', brief: '本书是一本针对江海联运电子航道图生产与应用的书，以国内北方某条河流电子航道图构建过程为例，详细介绍了江海联运电子航道图生产技术及应用。全书分为四个部分。第一部分对海图及电子海图的基础知识进行了介绍。第二部分介绍电子航道图生产的具体流程。' } }
    },
    data() {
        return {
            mbookItem:this.newbookMes,
            bookImg:this.newbookMes.url?this.newbookMes.url:require('@/assets/newbook/newbook.png')
        }
    },
	computed:{
		time(){
			let tmpTime = this.mbookItem.publishtime;
			let lastIndexNum = tmpTime.lastIndexOf('-');
			let result = tmpTime.substring(0,lastIndexNum);
			return result;
		}
	}

}
</script>

<style scoped>
.bookitem {
    /* height: 300px; */
    margin-top: 30px;
    border-bottom: 1px solid rgb(239, 242, 243);
    display: flex;
    flex-direction: row;
}

.leftimg {
    padding: 14px 17px;
    border-radius: 5px;
}

.leftimg img {
    width: 165px;
    height: 240px;
    box-shadow: 5px 5px 1px rgb(239, 242, 243);
}

.rightdesc {
    padding-left: 60px;
    display: flex;
    flex-direction: column;
	    
}

.bookbrief {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}

.bookbrief p:first-child {
    color: rgb(51, 54, 65);
    font-family: PingFang SC;
    font-size: 22px;
    /* line-height: 20px; */
    letter-spacing: 0px;
    text-align: left;

}

.bookbrief p:last-child {
    color: rgb(51, 54, 65);
    font-family: PingFang SC;
    font-size: 16px;
    /* line-height: 20px; */
    letter-spacing: 0px;
    text-align: left;
    margin: 0;

}

.bookdesc {
    flex: 2;
    color: rgb(51, 54, 65);
    font-family: PingFang SC;
    font-size: 18px;
    /* line-height: 30px; */
    letter-spacing: 0px;
    text-align: justify;
    margin-top: 20px;
	margin-bottom: 20px;
	text-indent: 2em;
}
</style>